<template>
	<view class="content">
		<view class="top">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" @change="changeTabs"></u-tabs>
			</u-sticky>
		</view>
		<view id="room" v-if="list1[0].viewFlag">
			<view class="search-content">
				<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"
					@change="changeHandler"></u-picker>
				<u-cell-group>
					<u-cell icon="search" :title="this.queryRoomInfo.cityName" @click="show = true"></u-cell>
					<u-search placeholder="输入小区大概名称" @search="searchHandle" @custom="searchHandle" :showAction="true"
						actionText="搜索" v-model="queryRoomInfo.communityName" :animation="false" :clearabled="true"
						@change="searchChangeHandle" height="80rpx">
					</u-search>
				</u-cell-group>
			</view>

			<view>
				<u-line color="#2979ff"></u-line>
			</view>

			<view class="list-content">
				<u-toast ref="uToast"></u-toast>
				<u-list @scrolltolower="scrolltolower" height="400rpx" scrollable :showScrollbar="true">
					<u-list-item v-for="(item, index) in roomList" :key="index">
						<u-cell :title="communityNameAll(item.communityName, item.termNo, item.dongNo, item.cellNo)"
							:value="'损失金额:' + item.lossMoney" :label="'原因：' + item.description" @click="clickCell(item)"
							center></u-cell>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="!popShow">
				<text>点击搜索结果展示详情</text>
			</view>
			<view name="infoDetail" style="width: 100%; height: 250rpx;" v-if="popShow">
				<view style="height: 40rpx; margin-left: 40%;">
					<u--text size="30" text="详细信息"></u--text>
				</view>
				<view class="detail-content">
					<u--text size="30" :text="'标题：' + popShowInfo.title + popShowInfo.roomName"></u--text>
					<u--text size="25" :text="'信息：' + popShowInfo.roomHolder"></u--text>
					<u--text size="25" :text="'原因：' + popShowInfo.description"></u--text>
					<view class="grid-img">
						<u--text size="25" :text="'图片'"></u--text>
						<u-grid>
							<u-grid-item v-for="(urlImg,urlIndex) in confirmInfoUrls" :key="urlIndex">
								<u--image :showLoading="true" :src="urlImg" width="160rpx" height="160rpx" @click="clickImg"></u--image>
								<u-popup :show="popImgShow" :round="10" mode="center" @close="closeImgPop" @open="openImgPop">
										<u--image :showLoading="true" :src="urlImg" width="500rpx" height="500rpx"></u--image>
								</u-popup>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>

		</view>
		
		<view id="map-black" v-if="list1[1].viewFlag">
			<view class="work-container">
				<!-- 轮播图 -->
				<!-- 		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
					<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
						<swiper-item v-for="(item, index) in data" :key="index">
							<view class="swiper-item" @click="clickBannerItem(item)">
								<image :src="item.image" mode="aspectFill" :draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot> -->
				<view class="page-section page-section-gap">
					<map id="map" class="map" style="width: 100%; height: 300px;" :show-location="true" :latitude="latitude"
						:longitude="longitude" :markers="covers">
					</map>
				</view>
			
				<view style="padding: 10px;">
					
				</view>
			
				<view>
					<u--text text="输入想要查看的小区附近" size="40" align="center"></u--text>
					<view style="padding: 5px;">
						
					</view>
					<u-cell-group>
						<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"
							@change="changeHandler"></u-picker>
						<u-cell icon="search" :title="cityName" size="large" @click="show = true"
							></u-cell>
					</u-cell-group>
					<u--input v-model="userNowAddr" prefixIcon="search" prefixIconStyle = "font-size: 22px" placeholder="输入所在小区" border="surround" clearable></u--input>
				</view>
			
				<view style="padding: 20px;">
					<u-button type="primary" text="搜索附近黑房东" size="large" @click="searchArround"></u-button>
				</view>
			
				<u-toast ref="uToast"></u-toast>
			</view>
			
		</view>
		
		
	</view>


</template>

<script>
	import {
		queryRoom
	} from '@/api/room/room.js'
	import {
		getUserProfile
	} from '@/api/system/user.js'
	import user from '../../store/modules/user'
	import {
		queryAroundBlackRoom
	} from '@/api/location/location.js'

	export default {
		data() {
			return {
				popShow: false,
				popImgShow: false,
				popShowInfo: {
					title: '',
					description: '',
					roomName: '',
					roomHolder: '',
					confirmInfoUrl:''
				},
				toastInfo: {
					type: 'error',
					icon: false,
					title: '失败主题',
					message: "没有找到相关数据",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				},
				queryRoomInfo: {
					userId: '',
					cityName: '成都',
					communityName: '',
					termNo: '', // 期数
					dongNo: '', // 楼栋号
					cellNo: '', // 单元号
					roomName: '',
					description: '',
					lossMoney: '',
					roomHolder: '',
					confirmInfoUrl: '',
					limit: 4,
					page: 0,
				},
				companyList:[],
				roomList: [],
				roomListTotalNum: 0,
				list1: [{
					name: '搜索黑名单',
					current:'0',
					viewFlag: true
				}, {
					name: '查看附近',
					current:'1',
					viewFlag: false
				}, ],
				show: false,
				columns: [
					['成都']
				],
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',

				],
				canquery: true,
				lastLength: 0,
				loadPage: 0,
				lastListNum: 0,
				user: {
					userId: "",
					phonenumber: "",
					email: "",
					sex: ""
				},
				show:false,
				columns: [
					['成都']
				],
				cityName:"成都",
				userNowAddr:"",
				toastInfo: {
					type: 'error',
					icon: false,
					title: '查询次数不足',
					message: "查询次数不足",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				},
				user: {
					userId: "",
					phonenumber: "",
					email: "",
					sex: ""
				},
				roleGroup: "",
				postGroup: "",
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				blackCover: {
					latitude: "",
					longitude: "",
					iconPath: '/static/location/blackroom.jpg',
					width: 30,
					height: 30,
					title: "black",
					callout: {
						content: "",
					}
				},
				initMycover: {
					latitude: "",
					longitude: "",
					iconPath: '/static/location/user.png',
					width: 30,
					height: 30,
					title: "我的位置",
					callout: {
						content: "我的位置",
					}
				},
				covers: [],
				queryAroundBlackRoomAo: {
					userLatitude: null,
					userLongitude: null,
					userId: null,
					userNowAddr: ""
				},
				current: 0,
				swiperDotIndex: 0,
				data: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				]
			}
		},
		onReady() {
			console.log("user:", this.$store.state.user)
			this._mapContext = uni.createMapContext("map", this);
			
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});
			
			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});
		},
		onLoad() {
			if (this.$store.state.user == null){
				this.getUser()
			} else {
				this.user = this.$store.state.user
			}
		},
		computed: {
			confirmInfoUrls(){
				if (this.popShowInfo.confirmInfoUrl.length > 0){
					return this.popShowInfo.confirmInfoUrl.substring(0, this.popShowInfo.confirmInfoUrl.lastIndexOf(",")).split(",")
				} else {
					return ""
				}
			},
			communityNameAll() {
				return function(communityName, termNo, dongNo, cellNo, roomName) {
					let msg = communityName + " "
					if (termNo != null && termNo != "") {
						msg += termNo + "期 "
					}
					if (dongNo != null && dongNo != "") {
						msg += dongNo + "栋 "
					}
					if (cellNo != null && cellNo != "") {
						msg += cellNo + "单元 "
					}
					if (roomName != null && roomName != "") {
						msg += roomName
					}
					return msg
				}
			}
		},
		// 回调参数为包含columnIndex、value、values
		methods: {
			changeTabs(indexTab){
				let index = indexTab.current
				for (var i = 0; i < this.list1.length; i++) {
					if (index == i){
						this.list1[i].viewFlag = true
					} else {
						this.list1[i].viewFlag = false
					}
				}
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.roleGroup = response.roleGroup
					this.postGroup = response.postGroup
				})
			},
			clickCell(item) {
				console.log("item:", item)
				this.popShowInfo = {
					title: '',
					description: '',
					roomName: '',
					roomHolder: '',
					confirmInfoUrl: ''
				}
				this.popShow = true
				this.popShowInfo.description += item.description
				this.popShowInfo.roomName = item.roomName
				this.popShowInfo.roomHolder = item.roomHolder
				this.popShowInfo.confirmInfoUrl = item.confirmInfoUrl

				this.popShowInfo.title = item.communityName + " "
				if (item.termNo != null && item.termNo != "") {
					this.popShowInfo.title += item.termNo + "期 "
				}
				if (item.dongNo != null && item.dongNo != "") {
					this.popShowInfo.title += item.dongNo + "栋 "
				}
				if (item.cellNo != null && item.cellNo != "") {
					this.popShowInfo.title += item.cellNo + "单元 "
				}
			},
			confirm(e) {
				this.queryRoomInfo.cityName = e.value[0]
				this.show = false
			},
			scrolltolower() {
				this.getUser()
				this.queryRoomInfo.userId = this.user.userId

				let pages
				if (this.roomListTotalNum % this.queryRoomInfo.limit == 0) {
					pages = this.roomListTotalNum / this.queryRoomInfo.limit
				} else {
					pages = this.roomListTotalNum / this.queryRoomInfo.limit + 1
				}

				if (this.queryRoomInfo.page < pages) {
					this.queryRoomInfo.page += 1
					queryRoom(this.queryRoomInfo).then(res => {
						if (res.code = 200) {
							if (res.msg != null &  res.data != null) {
								this.$refs.uToast.show({
									type: 'info',
									icon: false,
									title: '失败主题',
									message: res.msg,
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
									complete() {
										// params.url && uni.navigateTo({
										// url: params.url
										// })
									}
								})
						}
						if (res.data == null || res.data.length == 0 && res.code != 200) {
								this.$refs.uToast.show({
									type: 'error',
									icon: false,
									title: '失败主题',
									message: "查询失败，联系管理",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
									complete() {
										// params.url && uni.navigateTo({
										// url: params.url
										// })
									}
								})	
							}
							
						}

						for (var i = 0; i < res.data.length; i++) {
							this.roomList.push(res.data[i])
						}
						this.roomListTotalNum = res.total
					})
				}
			},

			searchChangeHandle(value) {
				if (value.length != this.lastLength) {
					this.canquery = true
				}
				if (value.length >= 2 && value.length % 2 === 0 && this.canquery) {
					this.queryRoomInfo.communityName = value
					this.queryRoomInfo.userId = user.userId
					this.canquery = false
					queryRoom(this.queryRoomInfo).then(res => {
						this.roomList = res.data
						if (this.roomList.length == 0) {
							this.$refs.uToast.show({
								...this.toastInfo,
								complete() {
									// params.url && uni.navigateTo({
									// url: params.url
									// })
								}
							})
						}
					})
				}
				this.queryRoomInfo.page = 0
			},
			searchHandle(value) {
				this.queryRoomInfo.communityName = value

				queryRoom(this.queryRoomInfo).then(res => {
					this.roomList = res.data
					this.roomListTotalNum = res.total
					if (this.roomList.length == 0) {
						this.$refs.uToast.show({
							...this.toastInfo,
							complete() {
								// params.url && uni.navigateTo({
								// url: params.url
								// })
							}
						})
					}
				})
				this.queryRoomInfo.page = 0
			},
			openPop() {},
			closePop() {
				this.popShow = false
			},
			clickImg(){
				this.popImgShow = true
			},
			openImgPop() {},
			closeImgPop() {
				this.popImgShow = false
			},
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.roleGroup = response.roleGroup
					this.postGroup = response.postGroup
				})
			},
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
			},
			
			getLocationSuc() {
				this.getUser()
			
				this.queryAroundBlackRoomAo.userId = this.user.userId
				this.queryAroundBlackRoomAo.userNowAddr = this.cityName + this.userNowAddr
				queryAroundBlackRoom(this.queryAroundBlackRoomAo).then(response => {
					if (response.data != null) {
						this.covers = []
						
						for (var i = 0; i < response.data.length; i++) {
							let coverNew = response.data[i]
							this.initMycover.latitude = coverNew.latitudeUser
							this.initMycover.longitude = coverNew.longitudeUser
							this.blackCover = {
								latitude: coverNew.latitude,
								longitude: coverNew.longitude,
								iconPath: '/static/location/blackroom.jpg',
								width: 15,
								height: 15,
								title: coverNew.communityName,
								callout: {
									content: coverNew.communityName,
								},
								latent: 1000
							}
							this.covers.push(this.blackCover)
						}
						this.covers.push(this.initMycover)
			
						this._mapContext.moveToLocation({
							latitude: this.initMycover.latitude,
							longitude: this.initMycover.longitude,
						})
						this._mapContext.addMarkers(this.covers)
					} else {
						this.toastInfo.message = response.msg
						this.$refs.uToast.show({
							...this.toastInfo,
							complete() {
								// params.url && uni.navigateTo({
								// url: params.url
								// })
							}
						})
					}
			
				})
			},
			
			searchArround() {
				if ("" != this.userNowAddr){
					this.getLocationSuc()
				}
			
			},
			confirm(e) {
				this.cityName = e.value[0]
				this.show = false
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.list-search {
		height: 20%;
	}
	
	.detail-content {
		display: inline-block;
		height: 300rpx;
		width: 100%;
		background-color: aqua;
	}
	.map {
		flex: 1;
	}
	
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	/* #endif */
	
	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}
	
	.swiper {
		height: 300rpx;
	}
	
	.swiper-box {
		height: 150px;
	}
	
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}
	
	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}
	
		.image {
			width: 100%;
		}
	}
</style>